<template>
    <div class="app-container">
        <!-- <PageHeader :border="false" title="案例查询" />
        <el-divider class="mt-0" /> -->

        <el-row :gutter="20" class="mb-3">
            <el-col :span="4">
                <div class="head-container">
                    <el-input v-model="deptName" clearable placeholder="请输入部门名称" prefix-icon="Search"
                              style="margin-bottom: 20px"/>
                </div>
                <div class="head-container">
                    <el-tree ref="deptTreeRef" :data="deptOptions"
                             :expand-on-click-node="false" :filter-node-method="filterNode" :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
                             default-expand-all
                             highlight-current node-key="id" @node-click="handleNodeClick"/>
                </div>
            </el-col>
            <el-col :span="20">
                <!--查询条件-->
                <el-form ref="queryParamsRef" :inline="true" :model="queryParams" label-width="auto">
                    <el-form-item label="案例名称" prop="caseName">
                        <el-input v-model="queryParams.caseName" clearable @clear="getCaseBuildLists"
                                  @keyup.enter="getCaseBuildLists"/>
                    </el-form-item>
                    <el-form-item label="关键词" prop="keyword">
                        <el-input v-model="queryParams.keyword" clearable @clear="getCaseBuildLists"
                                  @keyup.enter="getCaseBuildLists"/>
                    </el-form-item>
                    <!-- <el-form-item label="状态">
                        <el-select v-model="queryParams.state" style="width: 12.5rem" @change="getCaseBuildLists">
                            <el-option v-for="item in nj_casebuild_state" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" @click="getCaseBuildLists">
                            <el-icon class="me-1">
                                <Search/>
                            </el-icon>
                            查询
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="handleRest(queryParamsRef)">
                            <el-icon class="me-1">
                                <Refresh/>
                            </el-icon>
                            重置
                        </el-button>
                    </el-form-item>
                </el-form>

                <el-table ref="CaseBuildTableRef" v-loading="loading" :data="CaseBuildTables"
                          border stripe
                          :row-style="tableRowStyle" @selectionChange="selectChangeHandle"
                          @row-dblclick="handleDbClick"
                >
                    <el-table-column label="案例编号" prop="caseCode"/>
                    <el-table-column label="案例名称" prop="caseName"/>
                    <el-table-column label="更新日期" prop="updatedate"/>
                    <el-table-column label="关键词" prop="keyword" width="180">
                    </el-table-column>
                    <el-table-column label="单位" prop="unitId"/>
                    <el-table-column label="部门" prop="depId"/>
                    <el-table-column label="要旨" prop="gist" width="180"/>
                    <el-table-column align="center" filter-placement="bottom-end" label="状态" prop="state" width="100">
                        <template #default="{ row, $index }">
                            <el-tag :type="row.state === '已发布' ? 'success' : 'danger'" disable-transitions>{{
                                    row.state
                                }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" fixed="right" label="操作" width="140">
                        <template #default="scope">
                            <el-button link size="small" type="primary"
                                       @click="AddEditCaseBuildRef.showEditDrawer(scope.row)">
                                <el-icon class="me-1">
                                    <Edit/>
                                </el-icon>
                                查看
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="total > 0" v-model:limit="paging.pageSize" v-model:page="paging.pageNum"
                            :total="total" @pagination="getCaseBuildLists"/>
            </el-col>
        </el-row>

        <AddEditCaseBuild ref="AddEditCaseBuildRef" @getCaseBuildList="getCaseBuildLists"/>
    </div>
</template>

<script setup>
import {getCurrentInstance} from 'vue';
import AddEditCaseBuild from './ViewCaseSearch/ViewCaseSearch.vue';

import {listDept,} from '@/api/system/dept';
import {getCaseBuildList} from '@/api/CaseBuild/CaseBuild';
import PageEnum from '@/enum/PageEnum.js';

const {proxy} = getCurrentInstance();
const {nj_casebuild_state} = proxy.useDict('nj_casebuild_state')


const queryParamsRef = ref()
const deleteStatus = ref(true)
const AddEditCaseBuildRef = ref({})

const unitId = ref()
const deptList = ref([])
const refreshTable = ref(true);
const treeloading = ref(true);

const isExpandAll = ref(true);

const loading = ref(false)
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE
})

const queryParams = ref({
    caseName: null,
    unitId: null,
    keyword: null,
    state: null
})

const total = ref(0)
const CaseBuildTables = ref([
    {
        caseName: undefined,
        caseCode: undefined,
        keyword: undefined,
        updatedate: undefined,
        unitId: undefined,
        depId: undefined,
        gist: undefined,
        state: undefined
    }
])

onMounted(() => {
    // getDeptLists()
    getCaseBuildLists();
    getDeptTree();
})
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
// 获取调解室房间列表
const getCaseBuildLists = async () => {
    loading.value = true
    queryParams.value.state = 1;
    console.log(queryParams.value);
    await getCaseBuildList(queryParams.value, paging.value).then(res => {
        CaseBuildTables.value = res.rows
        total.value = res.total
        loading.value = false
    })
}

const CaseBuildTableRef = ref()
const selectChangeHandle = (data) => {
    deleteStatus.value = data.length === 0;
}

// 重置搜索调解
const handleRest = (formEl) => {
    queryParams.value = {
        caseName: null,
        unitId: null,
        keyword: null,
        state: null
    }
    getCaseBuildLists()
}

const deptId = ref('');
const deptName = ref('');
const deptOptions = ref(undefined);
/** 通过条件过滤节点  */
const filterNode = (value, data) => {
    if (!value) return true;
    return data.deptName.indexOf(value) !== -1;
};
/** 根据名称筛选部门树 */
watch(deptName, val => {
    proxy.$refs['deptTreeRef'].filter(val);
});

/** 查询部门下拉树结构 */
function getDeptTree() {
    listDept().then(response => {
        deptOptions.value = response.data.filter(
            item => item.isUnit === true
        );
        deptOptions.value = proxy.handleTree(deptOptions.value, 'deptId');
    });
    // deptTreeSelect().then(response => {
    //     deptOptions.value = response.data;
    // });
}

/** 节点单击事件 */
function handleNodeClick(data) {
    console.log(data)
    queryParams.value.unitId = data.deptId;

    // deptId.value = data.deptId;
    getCaseBuildLists();
}

const handleDbClick = (row) => {
    AddEditCaseBuildRef.value.showEditDrawer(row)
}
</script>

<style lang="scss" scoped>
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}</style>